<template>
  <div class="main-area-box">
    <div class="pointer dialog-btn height-32 pad-l-4 pad-r-4" :class="warehouseType === 0? 'dialog-active-btn' :'dialog-disactive-btn'" :style="{left: left+'px', top: '15vh'}"  @click.stop="addToStore" 
    v-text="warehouseType === 0 ? '添加到仓库' : '已添加到仓库'">
    </div>
    <div class="dialog-detail">
      <el-dialog :visible.sync="dialogGoodsInfo" width="760px" style="height:792px" @close="close" :close-on-click-modal="true">
        <div class="up-area-box">
          <!-- 左侧图片区域 -->
          <el-row>
            <el-col :span="12">
              <div>
                <img class="width-330 height-350" :src="entity.picUrl" alt=""/>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="area-right height-350">
                <div class="font-20 line-2 font-white">{{ entity.title }}</div>
                <div class="supply-price font-14 flex">
                  <div class="flex-col">
                    <span class="mar-r-20">供货价</span>
                    <span class="mar-r-20 mar-t-15">淘宝零售价</span>
                  </div>
                  <div style="margin-left:35px">
                    <div>
                      <span class="font-white  font-w">￥{{ entity.minSupplierPrice }}</span>
                      <span v-if="entity.maxSupplierPrice" class="font-white  font-w"> ~ ￥{{ entity.maxSupplierPrice }}</span>
                    </div>
                    <template v-if="entity.minMarketPrice">
                      <div class="mar-t-15">
                        <span class="font-white  font-w">￥{{ entity.minMarketPrice }}</span>
                        <template v-if="entity.maxMarketPrice">
                          <span class="font-white  font-w"> ~ ￥{{entity.maxMarketPrice}} </span>
                        </template>
                      </div>
                    </template>
                  </div>
                </div>
                <div class="other-info-box flex-col">
                  <div>
                    <span>库存&nbsp;&nbsp;<span>{{ entity.stock }}</span></span>
                    <span style="color:#E5E5E5">|</span>
                    <span>销量&nbsp;&nbsp;<span>{{ entity.salesNum }}</span></span>
                  </div>
                  <span class="mar-t-10">店铺&nbsp;&nbsp;<span class="font-white">{{ entity.shopName }}</span></span>
                </div>
                <div class="scroll-img-box">
                  <template v-if="imageList.length > 1">
                    <el-carousel :interval="5000" arrow="always" :autoplay="false" height="64" indicator-position="none">
                      <el-carousel-item v-for="(item, index) in imageList" :key="index" >
                        <div class="swiper-item-img">
                          <img v-for="(subitem, subindex) in item" 
                            :key="subindex"
                            :src="subitem.imageUrl" 
                            :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''" 
                            @mouseenter="mousePicEnter(item)" 
                            alt=""/>
                        </div>
                      </el-carousel-item>
                    </el-carousel>
                  </template>
                  <template v-else>
                    <div class="swiper-item-img">
                      <img v-for="(item, index) in imageList[0]" 
                        :key="index" :src="item.imageUrl" 
                        :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''" 
                        @mouseenter="mousePicEnter(item)" 
                        alt="" />
                    </div>
                  </template>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="down-area-box" style="margin-top: 20px">
          <div>
            <el-tabs type="card" v-model="tabsVal">
              <el-tab-pane label="商品详情" name="1">
                <div class="goods-info-box">
                  <ul>
                    <li>建议分类：{{ entity.categoryName }}</li>
                    <li>商品重量：{{ entity.weight }}</li>
                    <li>商品体积：{{ entity.size }}</li>
                    <li>商品产地: {{ entity.prov + ' ' + entity.city }}</li>
                    <li>限购:</li>
                  </ul>
                  <div class="goods-img-box">
                    <div v-html="entity.description"></div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="SKU" name="2">
                <!-- 商品规格表格 162 117 172-->
                <div class="goods-info-box">
                  <div class="goods-img-box">
                    <el-table :data="skuList" :stripe="false" :highlight-current-row="false">
                      <el-table-column label="规格" prop="skuDetail" width="202"></el-table-column>
                      <!-- <el-table-column label="图片" width="138">
                        <template slot-scope="scope">
                        </template>
                      </el-table-column> -->
                      <el-table-column label="供货价" prop="supplierPrice" width="147">
                        <template slot-scope="scope">
                          ￥{{scope.row.supplierPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column label="建议零售价" prop="marketPrice" width="202">
                        <template slot-scope="scope">
                          ￥{{scope.row.marketPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column label="库存" prop="quantity"></el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="运费规则" name="3">
                <div class="goods-info-box">
                  <div class="goods-img-box">
                    <div class="goods-img-box">
                      <div v-for="(item, index) in entity.postageList" :key="index">
                        <div class="font-w">配送区域</div>
                        <div>{{item.postAreaNames}}</div>
                        <div class="font-w">运费标准({{dict.postType&&dict.postType[item.postType]}})</div>
                        <div>{{item.startStandard}}{{dict.valuation&&dict.valuation[item.valuation]}}以内，运费{{item.startFee}}元，每增加{{item.addStandard}}{{dict.valuation&&dict.valuation[item.valuation]}}，运费增加{{item.addFee}}元</div>
                        <hr>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getTaobaoGoodsDetail } from '@/api/goods/taobaoGoods'
import { getDictByGroupName } from '@/api/common/common'

export default {
  props: {
    itemId: {
      type: String,
      default: ''
    },
    warehouseType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      entity: {},
      imageList: [],
      skuList: [],
      enCategoryList: [],
      enCategoryIds: [],
      dialogVisible: false,
      tabsVal: '1',
      initIndex: 0,
      temp: [],
      dialogGoodsInfo: true,
      devW: '',
      left: ''
    }
  },
  // 初始化页面
  created() {
    getDictByGroupName('TaoBaoPostageDTO').then(response => {
      if (response.isError) return
      this.dict = response.data
    })
    this.getDetail()
  },
  mounted() {
    const that = this
    this.devW = document.documentElement.clientWidth
    this.left = (this.devW - 760) / 2 + 780
    window.onresize = () => {
      that.devW = document.documentElement.clientWidth
      that.left = (that.devW - 760) / 2 + 780
    }
  },
  methods: {
    close() {
      this.$emit('closeGoodsDeatil')
    },
    // 图片鼠标移入事件
    mousePicEnter(item) {
      if (item) {
        this.entity.picUrl = item.imageUrl
      }
    },
    closeWindow() {
      window.close()
    },
    addToStore() {
      if (this.entity.warehouseType === 1) return
      this.$emit('addToStore', this.entity)
    },
    getDetail() {
      getTaobaoGoodsDetail(this.itemId, this.getEnterpriseId()).then((response) => {
        if (response.isError) return
        this.entity = response.data
        this.$set(this.entity, 'warehouseType', response.data.warehouseType)
        const reg = /<img /g
        const description = response.data.description.replace(reg, '<img style="width:100%" ')
        this.$set(this.entity, 'description', description)
        this.skuList = response.data.skuList
        for (let i = 0; i < response.data.imageList.length; i++) {
          if (i % 5 === 0) {
            this.initIndex = parseInt(i / 5)
            this.imageList[this.initIndex] = []
          }
          this.imageList[this.initIndex].push(response.data.imageList[i])
        }
        if (this.imageList.length > 1) {
          this.mousePicEnter(this.imageList[0])
        } else {
          this.mousePicEnter(this.imageList[0][0])
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main-area-box {
  width: 100%;
  height: 100%;
  background: #f7f9fb;
  padding: 10px;
  position: relative;
  .dialog-btn {
    position: fixed;
    z-index: 999999;
    color: #fff;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
  }
  .dialog-active-btn {
    background: #FF6427;
  }
  .dialog-disactive-btn {
    background: #2B2B2E;
  }
  .dialog-detail {
    /deep/ .el-dialog__wrapper {
      overflow:hidden
    }
    /deep/ .el-dialog {
      height: 796px;
      overflow-y: auto;
      padding: 30px;
      background: #2B2B2E;
    }
    /deep/ .el-dialog::-webkit-scrollbar {
      display: none;
    }
    /deep/ .el-dialog__header {
      padding: 0;
    }
    /deep/ .el-dialog__body {
      margin-bottom: 30px;
      color: #999999;
    }
  }
  .up-area-box {
    .goods-title {
      font-size: 20px;
      font-weight: 400;
      color: rgba(255,255,255,0.5);
      line-height: 30px;
    }
    .other-info-box {
      font-size: 14px;
      padding-top: 20px;
      padding-bottom: 20px;
      &>div>span:nth-child(2) {
        color: #fff;
        margin-left: 6px;
        margin-right: 6px;
      }
    }
    .area-right {
      position: relative;
      .scroll-img-box {
        position:absolute;
        bottom: 0;
      }
    }
    .goods-table-info {
      /deep/ .el-table__row {
        font-size: 14px;
        color: rgba(255,255,255,0.5);
        img {
          width: 40px;
          height: 40px;
        }
      }
      /deep/ .is-leaf {
        border: none;
        background: #fff;
        color: rgba(255,255,255,0.5);
        font-weight: 400;
        font-size: 14px;
      }
    }
    .btn-group-box {
      display: flex;
      padding-top: 57px;
      padding-bottom: 30px;
      & > span {
        width: 162px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        border-radius: 4px;
        text-align: center;
      }
      .addBtn {
        color: #fff;
        background: #ff5a00;
        margin-left: 152px;
      }
      .backBtn {
        color: #ff5a00;
        background: #fff2ee;
        margin-left: 14px;
      }
    }
    /deep/ .el-carousel__container {
      width: 360px;
      height: 64px;
      & .el-carousel__item {
        height: 64px;
      }
      .swiper-item-img {
        width: 360px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 64px;
          height: 64px;
          margin-left: 10px;
        }
        & > img:nth-child(1) {
          margin-left: 0;
        }
      }
    }
    .swiper-item-img {
      width: 360px;
      display: flex;
      justify-content: flex-start;
      img {
        width: 64px;
        height: 64px;
        margin-left: 10px;
      }
      & > img:nth-child(1) {
        margin-left: 0;
      }
    }
  }
  .down-area-box {
    background: #252529;
    margin-bottom: 100px;
    /deep/ .el-table__empty-block {
      background: #252529;
    }
    /deep/ .el-tabs--card {
      .el-tabs__header {
        border: none;
        margin: 0;
        .el-tabs__item {
          border-left: none !important;
        }
      }
      .el-tabs__content {
        padding: 20px 15px;
        background: #252529;
      }
    }
    /deep/ .el-tabs__nav-scroll {
      .el-tabs__nav {
        border: none;
        display: flex;
        width: 100%;
        background:#2B2B2E ;
        border-radius: 0px;
        .is-active {
          border-top: 2px solid #ff5a00;
          color: #fff;
          background: #252529;
          border-bottom-color: #252529 !important;
          border-left: 1px solid rgba(245,245,245,0.5) !important;
          border-right: 1px solid rgba(245,245,245,0.5) !important
        }
        .el-tabs__item {
          flex: 1;
          margin-right: 0 !important;
          color: #fff;
          border-bottom: 1px solid rgba(245,245,245,0.5);
        }
      }
    }
    .goods-recomment-area {
      width: 30%;
      font-size: 16px;
      line-height: 30px;
      color: rgba(255,255,255,0.5);
    }
    .goods-info-box {
      & > ul {
        list-style: none;
        width: 686px;
        margin: 0 auto;
        background: #f9f9fa;
        font-size: 14px;
        color: rgba(255,255,255,0.5);
        display: flex;
        padding: 13px 20px;
        flex-wrap: wrap;
        li {
          width: 33.33%;
        }
      }
      .goods-img-box {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        img {
          width: 100%;
        }
      }
    }
    /deep/ .el-table__header th {
      background-color: #3A3A3E !important;
      color: #fff;
    }
    /deep/ .el-table__header th:nth-child(1) {
      padding-left: 22px;
    }
    /deep/ .el-table__row {
      background: #252529;
      color: #fff;
      td {
        background:#252529 ;
      }
      &>td:nth-child(1) {
        padding-left: 22px;
      }
    }
    /deep/ .el-table th.is-leaf {
      border-bottom: 1px solid transparent;
    }
    /deep/ .el-table td, .el-table th.is-leaf {
      border-bottom: 1px dashed #666669;
    }

  }
}
.supply-price{
  padding: 14px 10px;
  background: #252529;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
}
.mouse-selected {
  border: 2px solid #f40;
}
</style>
